<div id="content" style="height:558px;">
  <div id="condom-mainpage" class="rel" style="margin:16px; height:529px; background:#fff <?php if ($filename){ echo 'url('.$this->base.'/img/cms/'.$filename.')'; }; ?> center center no-repeat;">
<?php if ($admin) { ?>
    <div class="abs" style="background-color:#DCDDDF; padding:5px; bottom:5px; right:5px;">
      <form id="upload-form" name="upload-form" enctype="multipart/form-data" method="post" action="<?php echo $this->base; ?>/pages/axUpload/<?php echo ($category == 'c')?'condom':'accesories'; ?>">
        <div><?php __('Upload Content'); ?>:</div>
        <input type="file" id="uploadImage" name="uploadImage" onchange="doUploadContent()" />
        <div id="uploadBar" class="uploadBar" style="display:none;"></div>
        <div id="messageBox" class="boxError" style="display:none;"></div>
    </form>
    </div>
<?php } ?>
  </div>

<div id="inlineContent">
  <div id="update-page" style="display:none; background-repeat:no-repeat;">
<?php if ($admin) { ?>
    <div style="margin-left:252px; padding:27px 14px 10px; background-color:#fff">
      <table cellpadding="6" cellspacing="0" border="0" align="center" style="margin-top:10px;">
        <tr>
          <td rowspan="2"><div style="width:60px; height:60px;"><img id="thumb-preview" src="<?php e($this->base); ?>/img/default.png" width="60" height="60" /></div></td>
          <td class="label"><?php __('Title'); ?>:</td>
          <td><input type="text" id="product-name" name="name" class="input req" style="width:210px;" /></td>
        </tr>
        <tr>
          <td class="label"><?php __('Price'); ?>:</td>
          <td><input type="text" id="product-price" name="price" class="input req" style="width:210px;" /></td>
        </tr>
        <tr>
          <td colspan="3" align="center"><textarea name="details" cols="38" rows="10"></textarea></td>
        </tr>
        <tr>
          <td colspan="3" style="padding:0;">
            <table width="100%" cellpadding="6" cellspacing="0" border="0">
              <tr>
                <td width="70" class="label"><?php __('Sort Order'); ?>:</td>
                <td><input type="text" id="sort-order" name="order" style="width:30px;" /></td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td colspan="3" style="padding:0;">
            <form id="upload-form1" name="upload-form" enctype="multipart/form-data" method="post" action="<?php echo $this->base; ?>/products/axUpload/1">
              <table cellpadding="6" cellspacing="0" border="0">
                <tr>
                  <td width="70" class="label"><?php __('Image'); ?>:</td>
                  <td>
                    <div id="uploadBar1" class="uploadBar" style="display:none;"></div>
                    <div id="messageBox1" class="boxError" style="display:none;"></div>
                    <input type="file" id="uploadImage1" name="uploadImage" onchange="doUploadImage(1)" />
                  </td>
                </tr>
              </table>
            </form>
          </td>
        </tr>
        <tr>
          <td colspan="3" style="padding:0;">
            <form id="upload-form2" name="upload-form" enctype="multipart/form-data" method="post" action="<?php echo $this->base; ?>/products/axUpload/2">
              <table cellpadding="6" cellspacing="0" border="0">
                <tr>
                  <td width="70" class="label"><?php __('Thumbnail'); ?>:</td>
                  <td>
                    <div id="uploadBar2" class="uploadBar" style="display:none;"></div>
                    <div id="messageBox2" class="boxError" style="display:none;"></div>
                    <input type="file" id="uploadImage2" name="uploadImage" onchange="doUploadImage(2)" />
                  </td>
                </tr>
              </table>
            </form>
          </td>
        </tr>
        <tr>
          <td colspan="3" align="center" style="padding-top:10px;">
            <input type="button" value="<?php __('Save'); ?>" onclick="save();" />
            <input type="button" value="<?php __('Cancel'); ?>" onclick="closeUpdate()" />
            <input type="hidden" id="id" name="id" />
            <input type="hidden" id="category" name="category" value="<?php e($category); ?>" />
            <input type="hidden" id="image" name="image" />
            <input type="hidden" id="thumbnail" name="thumbnail" />
          </td>
        </tr>
      </table>
    </div>
<?php } ?>
  </div>

  <div id="product-page" class="rel" style="display:none; background-repeat:no-repeat;">
    <div style="margin-left:252px; padding:27px 14px 10px; background-color:#fff">
<?php if ($admin) { ?>
      <div id="edit-button"></div>
<?php } ?>
      <div style="height:65px;"><h1 id="product-title"></h1></div>
      <div id="product-details"></div>
      <div id="product-links" style="height:30px; padding-top:12px;">
        <div class="fLeft"></div>
        <div class="fRight"><a id="addlink" href="<?php $this->base; ?>/products/addcart/"></a></div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</div>
<?php if ($admin) { ?>
  <div id="addnew-product" onclick="edit()">ADD NEW PRODUCT</div>
<?php } ?>
</div>
<div id="side-products">
  <div id="inner-panel" style="width:418px;"></div>
</div>
<div class="clear"></div>

<script type="text/javascript">
var _webroot = '<?php e($this->base); ?>';
var _data    = <?php e($json); ?>;
var _confirm = '<?php __('Are you sure you want to delete this product?'); ?>';
var _curId   = 0;

function init () {
    var perpage  = 6;
    var page     = 1;
    var loaded   = 0;
    var newcount = 0;
    var total    = _data.length;
    var elem     = Ext.get('inner-panel');
    var records  = '';
    var thumb    = '';
    var html     = '';
    var next     = '';
    var prev     = '';
    var width    = (Math.ceil(total / perpage)) * elem.getWidth();

    elem.setWidth(width);

    Ext.each(_data, function(dt){
        loaded++;
        newcount++;

        thumb    = (dt.thumbnail) ? dt.thumbnail : 'default.png';
        records += '<div class="product" onclick="view('+dt.id+')">'+
                     '<div style="height:155px; background:url('+_webroot+'/img/products/'+thumb+') center top no-repeat"></div>'+
                     '<div class="thumbTitle" style="width:194px; height:15px; padding-top:4px;">'+dt.name+'</div>'+
                   '</div>';

        if (newcount % 2 == 0 || total == loaded) {
            records += '<div class="clear"></div>';
        }

        if (newcount == perpage || total == loaded) {
            prev    = (page == 1) ? '' : '<div class="abs navPrev" onclick="prev('+page+');">PREVIOUS PAGE</div>';
            next    = (total == loaded) ? '' : '<div class="abs navNext" onclick="next('+page+');">NEXT PAGE</div>';
            html    = '<div id="page-'+page+'" class="pages rel">'+records+prev+next+'</div>';
            records = '';
            newcount = 0;

            elem.insertHtml('beforeEnd', html);
            page++;
        }

    });

    initEditor();

    SexyLightbox.initialize({
        color: 'white',
        dir: _webroot+'/css/sexylightbox/',
        OverlayStyles : {
            'background-color': '#000',
            'opacity': 0.5
        }
    });
} // init

function initEditor () {
    tinyMCE_GZ.init({
        themes: 'advanced',
        languages: 'en',
        disk_cache: true
    }, function() {
        tinyMCE.init({
            mode: 'textareas',
            theme: 'advanced',
            theme_advanced_buttons1: 'bold,italic,underline,fontselect,fontsizeselect,forecolor,backcolor,cleanup',
            theme_advanced_buttons2: 'undo,redo,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink,image,|,code,help',
            theme_advanced_buttons3: '',
            theme_advanced_toolbar_location: 'top',
            theme_advanced_toolbar_align: 'left',
            theme_advanced_statusbar_location: 'bottom',
            theme_advanced_resizing: true
        });
   });
} // initEditor

function next (page) {
    if (Ext.isIE7 || Ext.isIE6) {
        page++;
        Ext.select('div.pages', false, 'inner-panel').setStyle({ display:'none' });
        Ext.fly('page-'+page).slideIn('r', { easing:'easeOut' });
    } else {
        $('#side-products').stop().scrollTo({ top:0, left:'+=418' }, 500, { easing:'swing' });
    }
} // next

function prev (page) {
    if (Ext.isIE7 || Ext.isIE6) {
        page--;
        Ext.select('div.pages', false, 'inner-panel').setStyle({ display:'none' });
        Ext.fly('page-'+page).slideIn('l', { easing:'easeOut' });
    } else {
        $('#side-products').stop().scrollTo({ top:0, left:'-=418' }, 500, { easing:'swing' });
    }
} // prev
<?php if ($admin) { ?>

function doUploadContent () {
    var errorMesg = '<h4>Please select an image from your computer.</h4>';
    var mesgBox   = Ext.get('messageBox');

    if (!Ext.fly('uploadImage').getValue()) {
        mesgBox.update(errorMesg);
        Ext.fly('uploadImage').highlight().focus();
        return false;
    } else if (mesgBox.isVisible()) {
        mesgBox.fadeOut({
            easing: 'easeOut',
            useDisplay: true
        });
    }

    Ext.fly('uploadImage').setStyle({  display:'none' });
    Ext.fly('uploadBar').fadeIn();

    AIM.submit(Ext.fly('upload-form').dom, { 'onComplete':completeCallback });
    Ext.fly('upload-form').dom.submit();
    Ext.fly('uploadImage').dom.value = '';

    Ext.fly('status').update('Uploading..');
        Ext.fly('status').slideIn('t', {
            easing: 'easeOut'
    });
} // doUploadContent

function completeCallback (response) {
    var json = Ext.decode(response);

    Ext.fly('uploadBar').setStyle({  display:'none' });
    Ext.fly('uploadImage').fadeIn();
    Ext.fly('status').slideOut('t', {
        easing: 'easeOut',
        useDisplay: true
    });

    if (json.status < 0) {
        var err = (json.message) ? json.message : 'Fail upload photo';
        Ext.fly('messageBox').highlight().update(err);
    } else if (json.status == 1) {
        Ext.fly('condom-mainpage').setStyle({ backgroundImage:'url('+_webroot+'/img/cms/'+json.filename+')' });
        Ext.fly('condom-mainpage').fadeIn({ easing:'easeOut' });
    }
} // completeCallback

function doUploadImage (no) {
    var errorMesg = '<h4><?php __('Please select an image from your computer.'); ?></h4>';
    var mesgBox   = Ext.get('messageBox'+no);

    if (!Ext.fly('uploadImage'+no).getValue()) {
        mesgBox.update(errorMesg);
        Ext.fly('uploadImage'+no).highlight().focus();
        return false;
    } else if (mesgBox.isVisible()) {
        mesgBox.fadeOut({
            easing: 'easeOut',
            useDisplay: true
        });
    }

    Ext.fly('uploadImage'+no).setStyle({  display:'none' });
    Ext.fly('uploadBar'+no).fadeIn();

    if (no == 1) {
        var callback = { 'onComplete':completeCallback1 };
    } else {
        var callback = { 'onComplete':completeCallback2 };
    }

    AIM.submit(Ext.fly('upload-form'+no).dom, callback);
    Ext.fly('upload-form'+no).dom.submit();
    Ext.fly('uploadImage'+no).dom.value = '';
} // doUploadImage

function completeCallback1 (response) {
    var json = Ext.decode(response);

    doCallback(1, json);

    if (json.status == 1) {
        Ext.fly('update-page').setStyle({ backgroundImage:'url('+_webroot+'/img/tmp/'+json.filename+')' });
        Ext.fly('image').dom.value = json.filename;
    }
} // completeCallback1

function completeCallback2 (response) {
    var json = Ext.decode(response);

    doCallback(2, json);

    if (json.status == 1) {
        Ext.fly('thumb-preview').dom.src = _webroot+'/img/tmp/'+json.filename;
        Ext.fly('thumbnail').dom.value = json.filename;
        Ext.fly('thumb-preview').fadeIn({ easing:'easeOut' });
    }
} // completeCallback2

function doCallback (no, json) {
    Ext.fly('uploadBar'+no).setStyle({  display:'none' });
    Ext.fly('uploadImage'+no).fadeIn();

    if (json.status < 0) {
        var err = (json.message) ? json.message : '<?php __('Fail upload image'); ?>';
        Ext.fly('messageBox'+no).highlight().update(err);
    } else if (json.status == 1) {
        var msg = (json.message) ? json.message : '<?php __('Image uploaded'); ?>';
        Ext.fly('messageBox'+no).update(err);
        Ext.fly('messageBox'+no).pause(5).fadeOut({
            easing: 'easeOut',
            useDisplay: true
        });
    }
} // doCallback

function save () {
    var message = Ext.get('message');
    var proceed = true;
    var focuson = '';
    var form    = 'update-page';
    var ed = tinyMCE.get('details');

    Ext.fly('message').setStyle({ display:'none' }).removeClass('error');
    Ext.select('.invalid', false, form).removeClass('invalid');
    Ext.select('div.invalidField', false, form).remove();
    Ext.select('.invalidText', false, form).removeClass('invalidText');

    Ext.each(Ext.select('.req', false, form).elements, function(e){
        var el = Ext.get(e);

        if (!el.getValue() || el.getValue() == 'select..') {
            proceed = false;
            el.addClass('invalid');
            el.up('td').prev('td').addClass('invalidText');

            if (!focuson) {
                focuson = e.id;
                el.focus();
                el.fadeIn({
                    duration: 2.0
                });
            }
        }
    });

    if (proceed == false) {
        message.update('Please enter Title and Price.');
        message.addClass('error').highlight();
        return false;
    }

    var values = {
        id: Ext.fly('id').getValue(),
        name: Ext.fly('product-name').getValue(),
        price: Ext.fly('product-price').getValue(),
        details: ed.getContent(),
        category: Ext.fly('category').getValue(),
        order: Ext.fly('sort-order').getValue(),
        image: Ext.fly('image').getValue(),
        thumbnail: Ext.fly('thumbnail').getValue()
    };

    transId = Ext.Ajax.request({
        url: _webroot+'/products/update',
        params: values,
        method: 'POST',
        success: function(response, opts) {
            var obj = Ext.decode(response.responseText);

            if (obj.status == false) {
                if (obj.mesg) {
                    message.update(obj.mesg);
                    message.addClass('error').slideIn().highlight();
                }
            } else {
                Ext.fly('id').dom.value = obj.id;

                if (obj.mesg) {
                    message.hide().update(obj.mesg);
                    message.addClass('success').slideIn().highlight().pause(5).slideOut('t', { useDisplay:true });
                }

                display(values);
            }
        },
        failure: function(response, opts) {
            message.update('server-side failure with status code '+response.status);
        },
        callback: function() {
            Ext.fly('status').slideOut('t', {
                easing: 'easeOut',
                useDisplay: true
            });
            Ext.each(Ext.query('input[type=submit],input[type=button]', form), function(e){ e.disabled = false; });
        }
    });

    if (Ext.Ajax.isLoading(transId)) {
        Ext.each(Ext.query('input[type=submit],input[type=button]', form), function(e){ e.disabled = true; });
        Ext.fly('status').update('Saving..');
        Ext.fly('status').slideIn('t', {
            easing: 'easeOut'
        });
    }

    return true;
} // save

function closeUpdate () {
    var page = (_curId) ? 'product-page' : 'condom-mainpage';

    Ext.fly('update-page').setStyle({ display:'none' });
    Ext.fly(page).fadeIn({ easing:'easeOut' });
    clearForm();
} // closeUpdate

function clearForm () {
    Ext.each(Ext.query('input[type=text],input[type=hidden]', 'update-page'), function(e){
        if (e.id != 'category') {
            e.value = '';
        }
    });
    Ext.fly('uploadImage1').dom.value = '';
    Ext.fly('uploadImage2').dom.value = '';
    Ext.fly('update-page').setStyle({ backgroundImage:'none' });
    Ext.fly('thumb-preview').dom.src = _webroot+'/img/default.png';
    tinyMCE.get('details').setContent('');
} // clearForm

function edit (id) {
<?php if ($admin) { ?>
    Ext.fly('condom-mainpage').setStyle({ display:'none' });
<?php } ?>
    Ext.fly('product-page').setStyle({ display:'none' });

    if (id) {
        Ext.each(_data, function(e){
            if (id == e.id) {
                Ext.fly('id').dom.value            = e.id;
                Ext.fly('product-name').dom.value  = e.name;
                Ext.fly('product-price').dom.value = e.price;
                Ext.fly('image').dom.value         = e.image;
                Ext.fly('thumbnail').dom.value     = e.thumbnail;
                tinyMCE.get('details').setContent(e.details);
                Ext.fly('sort-order').dom.value    = e.order;

                if (e.image) {
                    Ext.fly('update-page').setStyle({ backgroundImage:'url('+_webroot+'/img/products/'+e.image+')' });
                }
                if (e.thumbnail) {
                    Ext.fly('thumb-preview').dom.src = _webroot+'/img/products/'+e.thumbnail;
                }
            }
        });
    } else if (Ext.fly('id').getValue()) {
        clearForm();
    }

    Ext.fly('update-page').fadeIn({
        easing: 'easeOut'
    });
} // edit

function delProduct (id) {
    var message = Ext.get('message');
    var answer  = confirm(_confirm);

    if (!answer) {
        return;
    }

    Ext.fly('product-page').fadeOut({
        easing: 'easeIn',
        endOpacity: 0.5
    });

    transId = Ext.Ajax.request({
        url: _webroot+'/products/remove',
        method: 'POST',
        params: 'id='+id,
        success: function(response, opts) {
            var obj = Ext.decode(response.responseText);

            if (obj.status == true) {
                 Ext.fly('product-page').setStyle({ display:'none' });
                 Ext.fly('condom-mainpage').fadeIn();

                 if (obj.message) {
                    message.hide().update(obj.message);
                    message.addClass('success').slideIn().highlight().pause(5).slideOut('t', { useDisplay:true });
                 }

                 setTimeout(function(){
                    document.location = '<?php e($this->base); ?>/products/<?php echo ($category == 'c')?'condom':'mechandice'; ?>';
                 }, 2000);
            } else {
                Ext.fly('product-page').fadeIn({
                    easing: 'easeOut'
                });
                alert(obj.error);
            }
        },
        failure: function(response, opts) {
            message('server-side failure with status code '+response.status);
        },
        callback: function() {
            Ext.fly('status').slideOut('t', {
                easing: 'easeOut',
                useDisplay: true
            });
            Ext.each(Ext.query('input[type=submit],input[type=button]', 'edit-button'), function(e){ e.disabled = false; });
        }
    });

    if (Ext.Ajax.isLoading(transId)) {
        Ext.each(Ext.query('input[type=submit],input[type=button]', 'edit-button'), function(e){ e.disabled = true; });
        Ext.fly('status').update('Deleting..');
        Ext.fly('status').slideIn('t', {
            easing: 'easeOut'
        });
    }
} // delProduct
<?php } ?>

function view (id) {
    Ext.each(_data, function(e){
        if (id == e.id) {
            display(e);
            _curId = e.id;
        }
    });
<?php if (!$admin) { ?>
    SexyLightbox.display('#TB_inline?inlineId=inlineContent&height=588&width=618&background=#FFFFFF');
<?php } ?>
} // view

function display (o) {
    Ext.fly('product-page').hide();
<?php if ($admin) { ?>
    Ext.fly('condom-mainpage').setStyle({ display:'none' });
<?php } ?>
    Ext.fly('update-page').setStyle({ display:'none' });
    Ext.fly('product-page').setStyle({ backgroundImage:'url('+_webroot+'/img/products/'+o.image+')' });
<?php if ($admin) { ?>
   Ext.fly('edit-button').update('<input type="button" value="Edit Product" onclick="edit('+o.id+')"><input type="button" value="Delete Product" onclick="delProduct('+o.id+')">');
<?php } ?>
    Ext.fly('product-title').update(o.name);
    Ext.fly('product-details').update(o.details);
    Ext.fly('addlink').dom.href = _webroot+'/products/addcart/'+o.id;
    Ext.fly('product-page').fadeIn({
        easing: 'easeOut'
    });
} // display

<?php $this->addScript('Ext.onReady(function() { init(); });'); ?>
</script>
